<template>
  <div class="goodsList w100p h100p">
    <van-search v-model="value" show-action placeholder="请输入货号/单品名称" @search="onSearch" @cancel="onCancel" />
    <div class="flb bgWH headerTitle">
      <div class="total l20">
        <span>共</span>
        <span class="cYE mr2 ml2 f16">{{ goodsList.length }}</span>
        <span>个单品</span>
      </div>
      <div class="cYE f14 l20" @click="showGoodsPopup({}, 'add')">+添加单品</div>
    </div>
    <div class="content">
      <div class="contentBox">
        <div v-for="(item, idx) in goodsList" :key="idx" class="contentItem" @click="showGoodsPopup(item, 'update')">
          <van-swipe-cell>
            <van-cell class="size">
              <template #title>
                <div class="flr">
                  <span class="w60">货号</span>
                  <span class="cGY2 wc60">{{ item.productBrandArticleNo }}</span>
                </div>
              </template>
            </van-cell>
            <van-cell class="size" :border="false">
              <template #title>
                <div class="flr">
                  <span class="w60">名称</span>
                  <span class="cGY2 wc60">{{ item.productBrandArticleNoName }}</span>
                </div>
              </template>
            </van-cell>
            <template #right>
              <van-button square type="danger" text="删除" class="h100p" @click.stop="delGoodsInfo(item.id)" />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>
    <van-popup v-model="showGoods" round position="bottom">
      <van-form class="content oyauto w100p" @submit="updateGoodsInfo">
        <div class="flc mt10">
          <van-cell-group inset>
            <van-field v-model="goodsInfo.productBrandArticleNo" name="货号" label="货号" placeholder="货号" :rules="[{ required: true, message: '请填写货号' }]" />
            <van-field v-model="goodsInfo.productBrandArticleNoName" name="名称" label="名称" placeholder="名称" :rules="[{ required: true, message: '请填写名称' }]" />
          </van-cell-group>
        </div>
        <div style="margin: 16px;">
          <van-button color="#409eff" round block type="primary" native-type="submit">{{ goodsStatus === 'add' ? '添加' : '更新' }}</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
import pinyin from 'js-pinyin';
import { addProductBrandArticleNo, updateProductBrandArticleNo, deleteProductBrandArticleNo, getAllProductBrandArticleNoByProductBrandId } from '../utils/api'
export default {
  data() {
    return {
      id: '',
      value: '',
      activeProduct: [],
      goodsList: [],
      goodsListOrg: [],
      showBrand: false,
      brandInfo: {},
      brandStatus: 'add',
      showGoods: false,
      goodsStatus: 'add',
      goodsInfo: {}
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.getGoodsList()
  },
  methods: {
    getPingyin(name) {
      return pinyin.getCamelChars(name);
    },
    onSearch() {
      this.goodsList = this.goodsListOrg.filter(item => item.productBrandArticleNo.indexOf(this.value) !== -1 || item.productBrandArticleNoName.indexOf(this.value) !== -1)
    },
    onCancel() {
      this.goodsList = this.goodsListOrg
    },
    // 弹框-增/改
    showGoodsPopup(item, type) {
      this.goodsStatus = type
      this.goodsInfo = JSON.parse(JSON.stringify(item))
      this.showGoods = true
    },
    // 增/改
    async updateGoodsInfo() {
      this.showGoods = false
      if (this.goodsStatus === 'add') {
        await addProductBrandArticleNo({ ...this.goodsInfo, productBrandId: this.id })
        this.$toast.success('单品信息添加成功！')
      } else {
        await updateProductBrandArticleNo({ ...this.goodsInfo })
        this.$toast.success('单品信息更新成功！')
      }
      this.getGoodsList()
    },
    // 删
    async delGoodsInfo(id) {
      await this.$async.confirm({ message: '确认要删除单品信息吗？' })
      await deleteProductBrandArticleNo({ id })
      this.$toast.success('单品信息删除成功！')
      this.getGoodsList()
    },
    //查
    async getGoodsList() {
      let res = await getAllProductBrandArticleNoByProductBrandId({ productBrandId: this.id })
      res.data.forEach(el => {
        el.sort = this.getPingyin(el.productBrandArticleNo);
      });
      res.data.sort((a, b) => a.sort.localeCompare(b.sort));
      this.goodsListOrg = res.data
      this.goodsList = res.data
    }
  }
}
</script>
<style lang="less" scoped>
.goodsList {
  .size {
    padding: 4px 16px !important;
  }
  .content {
    height: calc(100% - 86px);
    box-sizing: border-box;
    .contentBox {
      height: 100%;
      overflow-y: auto;
      .contentItem {
        width: 100%;
        margin-top: 8px;
        box-sizing: border-box;
        background: white;
        .group {
          /deep/ .van-cell {
            padding: 4px 16px !important;
          }
        }
      }
    }
  }
  /deep/ .van-cell::after {
    border: 1px solid #eee !important;
  }
}
</style>
